<script setup lang="ts">
import { ref } from "vue";
import { AddCircle, AccessibilityOutline } from "@vicons/ionicons5";
import { Key, TreeOption } from "@z-ui/components/tree";
import ZForm from "@z-ui/components/form";
import { UploadRawFile } from "@z-ui/components/upload/src/upload";

type Tree = {
  label?: string;
  key?: string;
  children?: Tree[];
};

const treeData = ref<Tree[]>(createData());
// 测试异步
// const treeData = ref<TreeOption[]>(createAsyncData());
// 测试禁用
// const treeData = ref<TreeOption[]>([
//   {
//     key: "0",
//     label: "0",
//     children: [
//       { key: "0-0", label: "0-0" },
//       {
//         key: "0-1",
//         label: "0-1",
//         disabled: true,
//         children: [
//           { key: "0-1-0", label: "0-1-0" },
//           { key: "0-1-1", label: "0-1-1" },
//         ],
//       },
//     ],
//   },
// ]);
const selectedKeysRef = ref<Key[]>([]);

const handleCheckboxChanged = (check: boolean) => {
  console.log("🚀 ~ handleCheckboxChanged ~ check:", check);
};

function handleOnload(node: TreeOption) {
  return new Promise<TreeOption[]>((resolve) => {
    setTimeout(() => {
      resolve([
        {
          label: nextLabel(node.label),
          key: crypto.randomUUID(),
          isLeaf: false,
        },
      ]);
    }, 1000);
  });
}

function createData(level = 4, parentKey = ""): Tree[] {
  if (!level) return [];
  const arr = new Array(6 - level).fill(0);

  return arr.map((_, idx) => {
    const key = parentKey + level + idx;
    return {
      label: createLabel(level),
      key: key,
      children: createData(level - 1, key),
    };
  });
}

function createLabel(level: number) {
  if (level === 4) return "道生一";
  if (level === 3) return "一生二";
  if (level === 2) return "二生三";
  if (level === 1) return "三生万物";
  return "";
}

// @ts-ignore 异步加载-创建数据
function createAsyncData() {
  return [
    {
      label: nextLabel(),
      key: 1,
      isLeaf: false,
    },
    {
      label: nextLabel(),
      key: 2,
      isLeaf: false,
    },
  ];
}

function nextLabel(currentLabel?: string) {
  if (!currentLabel) return "Out of Tao, One is born";
  if (currentLabel === "Out of Tao, One is born") return "Out of One, Two";
  if (currentLabel === "Out of One, Two") return "Out of Two, Three";
  if (currentLabel === "Out of Two, Three")
    return "Out of Three, the created universe";
  if (currentLabel === "Out of Three, the created universe")
    return "Out of Tao, One is born";
  return "";
}

function handleClick(e: MouseEvent) {
  console.log(123, e);
}

function handleInputChange(value: string) {
  console.log("🚀 ~ handleInputChange ~ value:", value);
}
function handleInputBlur(value: string) {
  console.log("🚀 ~ handleInputBlur ~ value:", value);
}

function handleInputFocus(e: FocusEvent) {
  console.log("🚀 ~ handleInputFocus ~ e:", e);
}

const inputValue = ref("input");

const formModel = ref({ username: "zhangsan", password: "123456" });

const formRef = ref<InstanceType<typeof ZForm>>();

const handleFormSubmit = () => {
  console.log(11, formRef.value);

  formRef.value?.validate((valid, errors) => {
    console.log("🚀 ~ formRef.value?.validate ~ errors:", errors);
    console.log("🚀 ~ formRef.value?.validate ~ valid:", valid);
  });
};

const handleBeforeUpload = () => {
  return false;
};
</script>

<template>
  <div>
    <div class="section">
      <h3>icon</h3>
      <ZIcon :size="10" color="red">
        <AddCircle />
      </ZIcon>

      <ZIcon :size="10" color="blue">
        <AccessibilityOutline />
      </ZIcon>
    </div>

    <div class="section">
      <h3>tree</h3>
      <ZTree
        :data="treeData"
        label-field="label"
        key-field="key"
        :default-expanded-key="['40', '4031', '41', '4131']"
        :on-load="handleOnload"
        v-model:selected-keys="selectedKeysRef"
        selectable
        multiple
        :show-checkbox="true"
        :default-checked-keys="['40', '4031']"
      >
        <template #default="{ node }">
          <span>{{ node.key }} - {{ node.label }}</span>
        </template>
      </ZTree>

      <div class="section">
        <ZCheckbox
          :model-value="false"
          :disabled="false"
          :indeterminate="false"
          label="label"
          @change="handleCheckboxChanged"
          >标签
        </ZCheckbox>
      </div>
    </div>

    <div class="section">
      <h3>button</h3>

      type
      <p>
        <ZButton>default</ZButton>
        <ZButton type="primary">primary</ZButton>
        <ZButton type="success">success</ZButton>
        <ZButton type="warning">warning</ZButton>
        <ZButton type="danger">danger</ZButton>
        <ZButton type="info">info</ZButton>
      </p>

      size
      <p>
        <ZButton size="small">small</ZButton>
        <ZButton size="medium">medium</ZButton>
        <ZButton size="large">large</ZButton>
        <ZButton>default</ZButton>
      </p>

      <p>
        <ZButton round>round</ZButton>

        <ZButton disabled> disabled </ZButton>

        <ZButton type="warning" loading> loading </ZButton>

        <ZButton
          type="warning"
          icon-placement="right"
          @click="handleClick"
          @mousedown="handleClick"
        >
          <template #icon>
            <ZIcon><AddCircle></AddCircle></ZIcon>
          </template>
          icon
        </ZButton>
      </p>
    </div>

    <div class="section">
      <h3>input {{ inputValue }}</h3>

      <ZInput
        v-model="inputValue"
        show-password
        clearable
        @change="handleInputChange"
        @blur="handleInputBlur"
        @focus="handleInputFocus"
        style="width: 300px"
      >
        <template #prepend>前置</template>
        <template #prefixIcon>
          <ZIcon :size="10">
            <AddCircle />
          </ZIcon>
        </template>

        <template #sufixIcon>
          <ZIcon :size="10">
            <AddCircle />
          </ZIcon>
        </template>
        <template #append>后置</template>
      </ZInput>
    </div>

    <div class="section">
      <h3>form</h3>

      {{ formModel }}
      <ZForm
        ref="formRef"
        :model="formModel"
        :rules="{
          username: { required: true, message: '账号必填', trigger: 'input' },
          password: {
            required: true,
            message: '密码不能为空',
            trigger: 'input',
          },
        }"
      >
        <ZFormItem
          label="姓名"
          prop="username"
          :rules="[
            { max: 6, min: 3, message: '账号长度3-6以内', trigger: ['blur'] },
          ]"
        >
          <ZInput v-model="formModel.username"></ZInput>
          <!-- <template #label>密码</template> -->
          <!-- <template #error>错误信息</template> -->
        </ZFormItem>

        <ZFormItem
          label="密码"
          prop="password"
          :rules="[
            { max: 6, min: 3, message: '密码长度3-6以内', trigger: ['blur'] },
          ]"
        >
          <ZInput v-model="formModel.password" type="password"></ZInput>
        </ZFormItem>
      </ZForm>
      <br />
      <ZButton size="small" @click="handleFormSubmit">Submit</ZButton>
    </div>

    <div class="section">
      <h3>upload</h3>

      <ZUpload :before-upload="handleBeforeUpload" multiple>
        <ZButton size="small" type="success">上传</ZButton>
      </ZUpload>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.section {
  outline: 1px solid rgb(175, 122, 255);
  padding: 10px;
  margin: 20px 10px;

  h3 {
    margin: 0 0 10px 0;
    padding: 0;
    text-align: center;
  }
}
</style>
